<template>
  <div style="
  width: 476px;
  height: 260px;
 ">
      <div class="wrap" style="width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;">
        <div class="chartlist" style="width: 83%;
  margin-left: -10px;
  height: 117px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ffffff4d;">
          <!-- <div v-for="item in chartdata" :key="item.id" ref="item.chart"></div> -->
          <div ref="chart1" class="chart1" style="width: 70px;
  height: 95px;"></div>
          <div ref="chart2" class="chart2" style="width: 70px;
  height: 95px;"></div>
          <div ref="chart3" class="chart3" style="width: 70px;
  height: 95px;"></div>
          <div ref="chart4" class="chart4" style="width: 70px;
  height: 95px;"></div>
        </div>
        <div class="right" style="margin-left:-15px;
        margin-top:4px;">
        <div style="width: 430px;
  height: 140px;" ref="opeatePower"></div>
        <div style="width: 0px;
  height: 140px;position: absolute;
    right: 52px;
    border: 7px solid;
    border-width: 7px 5px;
    border-color: #15ffb4 transparent transparent transparent;
    transform: rotate(0);
    top: 165px;" class="mark"></div>
      </div>
      <img src="../assets/01/1442.png" style="width: 99%;
      height:100%;
  left: 1%;
  position: absolute;
  top: 0;
  opacity: 1;
  z-index: 0;" />
      </div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      opreatPower: 1056 + 'KW', 
      chartdata: [
        {
          data: 46,
          title: '当日利用率'
        },
        {
          data: 19,
          title: '当日设施故障率'
        },
        {
          data: 5,
          title: '当日设施离线率'
        },
        {
          data: 2,
          title: '当日设施停运率'
        },
      ],
    }
  },
  methods: {
      drawChartTop(chart,title,dataRate){
        var chart = echarts.init(chart);
        var option = {
				angleAxis: {
					max: 100,
					show: false,
                },
                title: {
                    textStyle: {
                        align: 'center',
                        color: '#fff',
                        fontSize: 1,
                        fontWeight: 'light'
                    },
                    bottom: '0%',
                    left: 'center',
                },
				tooltip: {
                    show: false,
					trigger: 'item',
					formatter: '{c}%'
				},
        graphic: [ 
        { //图形中间文字
					type: "text",
					left: "center",
          top: '33%',
					style: {
						text: dataRate + '%',
						textAlign: "center",
						fill: "#fff",
						fontSize: 18,
						fontWeight: 500
          }
        },
        { //图形下方标题
					type: "text",
					left: "center",
          bottom: 0,
					style: {
						text: title,
						textAlign: "center",
						fill: "#ffffff4d",
						fontSize: 10,
						fontWeight: 500
          }
        },

        ],
				radiusAxis: {
					type: 'category',
					show: true,
					axisLabel: {
						show: false,
					},
					axisLine: {
						show: false,
					},
					axisTick: {
						show: false
					},
				},
				polar: { // 圆环大小
					radius: ['86%', '100%'],
					center: ['50%', '40%'], //圆环位置
				},
				series: [{
					type: 'bar',
					roundCap: true,
					barWidth: 10,
					showBackground: true,
					backgroundStyle: { // 进度条背景色
						color: "#627977"
					},
					itemStyle: {
						normal: {
							opacity: 1,
							color: '#fff',
						},
					},
					data: [{
						value: 30,
						itemStyle: { // 进度条颜色
                            color: '#15ffb4',
                            shadowBlur: 0,
						},
					}, ],
					coordinateSystem: 'polar',
				}],
            };
            chart.setOption(option);
      },
      drawChartBtm(chart,title,currentPower) {
          // 数据数量
          var num = 30;
          // 列数
          var columns = function(i) {
              let a = [];
              for (let j = 0; j < i; j++) {
              a.push("");
              }
              return a;
          };
          // 随机数据
          var random_data = function(min, max, num) {
              let a = [];
              for (let i = 0; i < num; i++) {
              let rand = Math.floor(Math.random() * (max - min)) + min;
              a.push(rand);
              }
              // 得到初始化随机数据 a
              return a;
          };
          let currentData = random_data(10, 70, num);
          // 实时获取新数据并刷新
          let speed = 1000;
          var timer = setInterval(function() {
              currentData.shift();
              let rand = Math.floor(Math.random() * (70 - 10)) + 10;
              currentPower = rand;
              currentData.push(rand);
              // console.log(currentData);
              chart.setOption(option);
          }, speed);
          // 初始化表格
          var chart = echarts.init(chart);
          var option = {
              // backgroundColor: "#080b30",
              title: [
              {
                  text: title,
                  textStyle: {
                  align: "left",
                  color: "rgb(218, 218, 218)",
                  fontSize: 14,
                  fontWeight: 300
                  },
                  top: "4%",
                  left: "4%"
              },
              {
                  text: currentPower,
                  textStyle: {
                  align: "left",
                  color: "#fff",
                  fontSize: 20,
                  fontWeight: 500,
                  fontFamily: "sans-serif"
                  },
                  top: "19%",
                  left: "4%"
              }
              ],
              // 鼠标划入提示样式
              tooltip: {
              trigger: "axis",
              axisPointer: {
                  lineStyle: {
                  color: {
                      type: "linear",
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                      {
                          offset: 0,
                          color: "rgba(0, 255, 233,0)"
                      },
                      {
                          offset: 0.5,
                          color: "rgba(255, 255, 255,1)"
                      },
                      {
                          offset: 1,
                          color: "rgba(0, 255, 233,0)"
                      }
                      ],
                      global: false
                  }
                  }
              }
              },
              grid: {
              top: "40%",
              left: "5%",
              right: "5%",
              bottom: "10%"
              },
              xAxis: [
              {
                  show: false,
                  data: columns(num)
              }
              ],
              yAxis: [
              {
                  type: "value",
                  min: 0,
                  // max: 140,
                  splitNumber: 1,
                  splitLine: {
                  show: true,
                  lineStyle: {
                      color: "rgba(218, 218, 218, 0.616)"
                  }
                  },
                  axisLine: {
                  show: false
                  },
                  axisLabel: {
                  show: false,
                  margin: 20,
                  textStyle: {
                      color: "#d1e6eb"
                  }
                  },
                  axisTick: {
                  show: false
                  }
              }
              ],
              series: [
              {
                  name: "注册总量",
                  type: "line",
                  smooth: false, //是否平滑
                  showSymbol: false,

                  lineStyle: {
                  normal: {
                      color: "#15ffb4"
                  }
                  },
                  label: {
                  // show: true,
                  // position: 'top',
                  // textStyle: {
                  //     color: '#00b3f4',
                  // }
                  },
                  itemStyle: {
                  // color: "#00b3f4",
                  // borderColor: "#fff",
                  // borderWidth: 10,
                  // shadowColor: 'rgba(0, 0, 0, .3)',
                  // shadowBlur: 0,
                  // shadowOffsetY: 2,
                  // shadowOffsetX: 2,
                  },
                  tooltip: {
                  show: false
                  },
                  areaStyle: {
                  normal: {
                      color: new echarts.graphic.LinearGradient(0,0,0,1,
                      [
                          {
                          offset: 0,
                          color: "rgba(15, 194, 140, 0.9)"
                          },
                          {
                          offset: 1,
                          color: "rgba(15, 194, 140, 0.2)"
                          }
                      ],
                      false
                      )
                  }
                  },
                  data: currentData,
                  animation: false
              }
              ]
          };
          chart.setOption(option);
          }
  },
  mounted() {
      this.drawChartBtm(this.$refs.opeatePower,'运行功率',this.opreatPower);
      this.drawChartTop(this.$refs.chart1,this.chartdata[0].title,this.chartdata[0].data);
      this.drawChartTop(this.$refs.chart2,this.chartdata[1].title,this.chartdata[1].data);
      this.drawChartTop(this.$refs.chart3,this.chartdata[2].title,this.chartdata[2].data);
      this.drawChartTop(this.$refs.chart4,this.chartdata[3].title,this.chartdata[3].data);
  }
}
</script>

<style>
/* 
.wrap{
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.chartlist{
  width: 83%;
  margin-left: -10px;
  height: 117px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ffffff4d;
}
.chartlist > div{
  width: 70px;
  height: 95px;
} */
</style>